<template>
  <div>
    <div class="toolbar">
      <el-form :inline="true" :model="q" size="mini">
        <el-form-item label="最后聊天时间">

          <el-date-picker v-model="q.start_updated_at" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                          placeholder="选择日期时间"></el-date-picker>
          -
          <el-date-picker v-model="q.end_updated_at" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                          placeholder="选择日期时间"></el-date-picker>
        </el-form-item>

        <el-form-item label="会话ID:">
          <el-input v-model="q.id" placeholder="会话ID" prefix-icon="el-icon-edit"></el-input>
        </el-form-item>
        <el-form-item label="所属商户:">
          <el-select v-model="q.play_mch_id" clearable :clear="clear()" placeholder="请选择" @change="mchChange">
            <el-option
              v-for="item in MerchantsList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="用户ID:">
          <el-input v-model="q.play_id" placeholder="用户ID" prefix-icon="el-icon-edit"></el-input>
        </el-form-item>


        <el-form-item label="代理账号:">
          <el-select v-model="q.agency_id" clearable filterable placeholder="请输入代理账号">
            <el-option v-for="item of AgencyList" :key="item.id" :label="item.id+'>'+item.user_name+'>'+item.nickname"
              :value="item.id" ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="回复状态:">
          <el-select v-model="q.is_replied" clearable placeholder="请选择">
            <el-option
              v-for="item in chatStatus"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
          <el-button type="danger" @click="reload">重置</el-button>

        </el-form-item>
      </el-form>
    </div>
    <el-table :data="listData.list" v-loading.body="listLoading" @sort-change="sortlist" size="mini" stripe border fit
              highlight-current-row :show-overflow-tooltip="true">

      <el-table-column prop="id" label='会话ID' width="80"></el-table-column>
      <el-table-column prop="agency_nickname" label='代理账号' width="150">
        <template slot-scope="scope">{{scope.row.agency.user_name}}</template>
      </el-table-column>
      <el-table-column prop="player_id" label='用户ID' width="200"></el-table-column>
      <el-table-column prop="mch_name" label='所属商户' min-width="120">
        <template slot-scope="scope" v-if="scope.row.player_mch">{{scope.row.player_mch.name}}</template>
      </el-table-column>
      <el-table-column prop="created_at" label='首次聊天时间' width="180"></el-table-column>
      <el-table-column prop="updated_at" label='最后聊天时间' width="180"></el-table-column>
      <el-table-column prop="is_replied" label='回复状态' width="100">
        <template slot-scope="scope">{{scope.row.is_replied?'已回复':'未回复'}}</template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template slot-scope="scope">
          <div>
            <el-button type="primary" size="mini" @click="showImInfo(scope.row)">查看</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="q.page_no" :page-sizes="$store.state.app.pageSizeArr"
                     :page-size="q.page_size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="listData.total">
      </el-pagination>
    </div>
    <service-iframe v-if="showServiceIframe" :showServiceIframe.sync="showServiceIframe"
                    :topicId="topicId"></service-iframe>
  </div>
</template>

<script>
  import {getChatInfo,getAgencyList} from '@/api'
  import {queryFilter} from '@/utils/patch'
  import serviceIframe from './serviceIframe'

  export default {
    components: {serviceIframe},
    data() {
      return {
        listData: {},
        q: {
          page_size: 30,
          page_no: 1,
        },
        listLoading: false,
        showUpdate: false,
        settleCycle: this.$store.state.app.settleCycle,
        show_id: null,
        AgencyType: this.$store.state.app.AgencyType,
        isEnable: false,
        isShow: false,
        score: 0,
        chatStatus: [{id: true, name: '已回复'}, {id: false, name: '未回复'}],
        showUserSet: false,
        showServiceIframe: false,
        avatar: 'http://image.barchain.net/',
        iframeSrc: './business/chat/player/playerMultiple.html?token=' + this.imtoken,
        topicId: 0,
        MerchantsList: this.$store.state.user.userinfo.mchs,
      AgencyMainList: [],
      AgencyList: [],
        isdis: true
      }
    },
    activated() {
      this.getList()
    this.getAgencyList()
    this.getChildAgencyList()
    },
    deactivated() {
      this.listLoading = false
    },
   created(){
      this.getMenberInfo()
   },
    methods: {
      getMenberInfo() {
        this.$store.dispatch('GetInfo').then(()=>{
          this.MerchantsList=this.$store.state.user.userinfo.mchs
        })
      },
      query() {
        this.q = Object.assign(this.q, {page_no: 1, page_size: 30})
        this.getList()
      },
      reload() {
        this.searchTime = []
        this.q = {page_size: 30, page_no: 1}
        this.getList()
      },
      sortlist(sort) {
        this.q.$orderby = sort.prop
        this.getList()
      },
      handleSizeChange(val) {
        this.q.page_size = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.q.page_no = val
        this.getList()
      },
      getList() {
        queryFilter(this.q)
        getChatInfo(this.q).then(res => {
          if (res.status === 0) {
            this.listLoading = false
            this.listData = res.data
          }
        })
        // this.listLoading = false
        // this.listData = this.resultList
      },
    getAgencyList () {
      getAgencyList({ agency_type: 2, page_size: 1000 }).then(res => {
        if (res.status === 0) {
          this.AgencyMainList = res.data.items
        }
      })
    },
    getChildAgencyList () {
      getAgencyList({ agency_type: 1, page_size: 1000 }).then(res => {
        if (res.status === 0) {
          this.AgencyList = res.data.items
        }
      })
    },
      exportExcel() {
        this.$message({message: '待开发', type: 'error'})
      },
      clear() {
        if (!this.q.play_mch_id) {
          this.$set(this.q, "play_id", null)
          this.isdis = true
        }
      },
      showImInfo(row) {
        // console.log(row.id)
        this.topicId = row.id
        this.showServiceIframe = true

      },
      mchChange(val) {

        val === "" ? this.isdis = true : this.isdis = false
      }
    },
    watch: {
      showUpdate() {
        if (!this.showUpdate) {
          this.getList()
        }
      },
      showServiceIframe() {
        if (!this.showServiceIframe) {
          this.getList()
        }
      },
    }
  }
</script>


<style rel="stylesheet/scss" lang="scss" scoped>
  .margin-auto-top {
    line-height: 80px;
    height: 80px;
    float: left;
    display: inline-block;
    font-size: 14px;
    line-height: 80px;
    width: 80%;

    .user-photo {
      display: inline-block;
      float: left;

      img {
        margin-left: 10px;
        border-radius: 50%;
        padding: 5px;
      }
    }

    .user-working {
      float: left;
      margin-left: 5px;
    }

    .user-wechat {
      display: inline-block;
      float: left;
      text-align: center;
      width: 85%;

      div {
        height: 40px;
        line-height: 40px;

        .bulletin {
          padding: 4px;
          border: none;
          font-size: 18px;
        }
      }
    }
  }

  .navbar {
    height: 80px;
    line-height: 50px;
    border-radius: 0px !important;

    .hamburger-container {
      line-height: 58px;
      height: 50px;
      float: left;
      padding: 0 10px;
    }

    .service {
      position: absolute;
      right: 160px;
      top: 16px;
    }

    .screenfull {
      position: absolute;
      right: 90px;
      top: 16px;
      color: red;
    }

    .avatar-container {
      height: 80px;
      display: inline-block;
      position: absolute;
      right: 35px;
      line-height: 80px;

      .avatar-wrapper {
        cursor: pointer;
        position: relative;

        .user-avatar {
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }

        .el-icon-caret-bottom {
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }


  }
</style>
